<template>
  <div class="homelogin">
    <header>
       <img src="../../assets/img-login/图标.png" alt="">
        <h1>好卖点</h1>
    </header>
    <!-- 输入框 -->
    <main>
       <p>
        <img src="../../assets/img-login/账号.png" alt="">
        <input type="tel" placeholder="请输入账号/手机号码" v-model.lazy.trim="tel">
       </p>
        <p>
        <img src="../../assets/img-login/密码.png" alt="">
        <input type="password" placeholder="请输入密码"  v-model.lazy.trim="pwd">
       </p>
       <aside>
         <a href="#">忘记密码 / 注册</a>
         <a href="#">游客登录</a>
       </aside>
         <button @click="Login">登录</button>
    </main>
     <!-- 其他登录 -->
        <h1>其他登录</h1>
        <footer class="dow">
          <img src="../../assets/img-login/微信.png" alt="">
          <img src="../../assets/img-login/qq.png" alt="">
          <img src="../../assets/img-login/微博.png" alt="">
        </footer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter} from "vue-router";
let router=  useRouter();
let tel =ref('');
let pwd =ref('');

const Login = () => {
  if (tel.value && pwd.value) {
    sessionStorage.setItem('user', JSON.stringify({ username: tel.value }));
    router.push('/home'); 
  } else {
    alert('请输入账号和密码');
  }
}

</script>

<style scoped>
.homelogin{
  width: 100rem;
  background-color: #FE234C;
}
.homelogin header{
   padding: 85px 110px 0px 110px ;
  
}
.homelogin header img{
   height: 10rem;
   border-radius: 1rem;
}
.homelogin header h1{
  color: white;
  font-weight: 800;
  margin: 10px 50px;
} 

main p {
  width: 16%;
  background-color: white;
  border: 1px gray solid;
  border-radius: 40px;
  margin: 2rem 3rem;
  display: flex;
  align-items: center;
  padding: 8px 15px;
}
main p img{
  width: 25px;
  flex-shrink: 0;
}
main p input{
  flex-grow: 1;
  margin-left: 10px;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 5px;
}
main  aside{
  width: 16%;
  display: flex;
  justify-content: space-between;
  margin-left: 3.5rem;
}
main aside a{
  font-size: 12px;
  color: white;
  margin-bottom: 20px;
}
main button{
  width: 10%;
  line-height: 45px;
  border-radius: 30px;
  border: none;
  text-align: center;
  margin: 20px 100px;
  font-weight: 800;
  cursor: pointer;
}

/* 其他登录 */
.homelogin h1{
  color: white;
  margin:50px 150px 30px 150px;
}
.homelogin footer{
  width: 15%;
  display: flex;
  justify-content: space-between;
  padding: 0px 0px 60px 70px;
}
.homelogin footer img{
  width: 50px;
}
</style>